<template>
  <div class="coderBox">
    <Header class="header"></Header>
    <div class="mainBox">
      <Left></Left>
      <Middle @dragover="dragOver" @drop.prevent="dropFn"></Middle>
      <Right></Right>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useDrag } from "@/store/modules/drag";
import Header from "./compt/header.vue";
import { initEditor, getItem, importJSON } from "./editor/index";
import Left from "./compt/left/left.vue";
import Right from "./compt/right.vue";
import Middle from "./compt/middle/middle.vue";
import { deepClone } from "@/assets/utils/deepClone";
const dragStore = useDrag();
// 需要在dragOver里面阻止默认行为 才能触发dropFn事件
function dragOver(e) {
  e.preventDefault();
}
async function dropFn(e) {
  e.stopPropagation();
  e.preventDefault();
  if (dragStore.dragCurrent.type == "example") {
    const ab = await import(`./example/${dragStore.dragCurrent.key}.ts`);
    importJSON(JSON.stringify(ab.default));
    return;
  }
  let time = String(new Date().getTime());
  let obj = {
    id: time,
    key: dragStore.dragCurrent.key,
    discribe: dragStore.dragCurrent.leftOpt.label,
    type: dragStore.dragCurrent.type,
    props: dragStore.dragCurrent.middleOpt.props || {},
    otherProps: dragStore.dragCurrent.middleOpt.otherProps || {},
    highEdit: dragStore.dragCurrent.middleOpt.highEdit || {},
    methods: dragStore.dragCurrent.middleOpt.methods || {}
  };
  if (obj.type == "formItem") {
    obj.highEdit.itemKey = time;
  }
  if (obj.type == "container") {
    let commonTypeList = dragStore.renderData.filter((item) => {
      return item.key == obj.key;
    });
    obj.highEdit.ref = obj.highEdit.ref + (commonTypeList.length ? commonTypeList.length : "");
    obj.childrens = [];
  }
  if (!dragStore.enterItem && obj.type == "container") {
    if (dragStore.leaveItem) {
      let index = dragStore.renderData.findIndex((item) => {
        return item.id == dragStore.leaveItem.id;
      });
      return dragStore.renderData.splice(dragStore.renderData[index].leaveElement == "back" ? index : index + 1, 0, deepClone(obj));
    }
    return dragStore.renderData.push(deepClone(obj));
  }
  if (obj.type == "formItem" && dragStore.enterItem?.type == "container") {
    obj.pid = dragStore.enterItem.id;
    let form = dragStore.refList[dragStore.enterItem.highEdit.ref].dataed.cFormRef.form;
    form[obj.props.itemKey] = obj.props.itemValue;
    return dragStore.enterItem.childrens.push(deepClone(obj));
  }
  if (obj?.type == "tableItem" && dragStore.enterItem?.type == "container") {
    obj.pid = dragStore.enterItem.id;
    return dragStore.enterItem.childrens.push(deepClone(obj));
  }
  let nowTypeItem = getItem(obj.type);
  if (!dragStore.enterItem) {
    return ElMessage.error(`${nowTypeItem.label}不允许直接插入`);
  }
  if (dragStore.enterItem) {
    let nowTypeEnterItem = getItem(dragStore.enterItem.type);
    return ElMessage.error(`${nowTypeEnterItem.label}中不允许插入${nowTypeItem.label}中`);
  }
}
initEditor();
</script>
<style lang="scss" scoped>
.coderBox {
  font-family: fangsong;
  height: 100%;
  display: flex;
  font-weight: bold;
  flex-direction: column;
  .mainBox {
    display: flex;
    justify-content: space-between;
    // padding: 10px 0 0;
    box-sizing: border-box;
    flex: 1;
    > div {
      background: rgb(255, 255, 255);
    }
  }
}
</style>
